$(function() {
	$.ajax({
		url: "http://localhost:8080/hotel/recommendHotel",
		async: false,
		method: "get",
		success: function(data) {
			$("#recommendHotel").empty();
			var hotels = data.t;
			for (let i = 0; i < hotels.length; i++) {

				var sr = hotels[i].hotelImg;
				var srs = sr.split(";");

				var raw = `<div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-duration="1200">
				    <div class="room-item shadow rounded overflow-hidden">
				        <div class="position-relative">
				            <img style="width: 418px;height: 218px;" class="img-fluid" src="` + srs[0] + `" alt="">
				            <small class="position-absolute start-0 top-100 translate-middle-y bg-primary text-white rounded py-1 px-3 ms-4">$100/Night</small>
				        </div>
				        <div class="p-4 mt-2">
				            <div class="d-flex justify-content-between mb-3">
				                <h5 class="mb-0">` + hotels[i].hotelName + `</h5>
				                <div class="ps-2">
				                    ` + hotels[i].hotelScore + `
				                </div>
				            </div>
				            <p class="text-body mb-3" id="hotel-desc">` + hotels[i].hotelDesc + `</p>
				            <div class="d-flex justify-content-between">
				                <a class="btn style1 rounded py-2 px-4 xiangqing" id="` + hotels[i].id + `">查看详情</a>
				            </div>
				        </div>
				    </div>
				</div>`;

				$("#recommendHotel").append(raw);

			}
		}
	});

	$.ajax({
		url: "http://localhost:8080/hotel/findAll",
		async: false,
		method: "get",
		success: function(data) {
			var hotels = data.t;

			$("#find-all").empty();

			for (let i = 0; i < 3; i++) {

				var sr = hotels[i].hotelImg;
				var srs = sr.split(";")

				var raw = `<div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-duration="1200">
								<div class="room-item shadow rounded overflow-hidden">
																	<div class="position-relative">
																		<img style="width: 418px;height: 218px;" class="img-fluid" src="` + srs[0] + `" alt="">
																		<small
																			class="position-absolute start-0 top-100 translate-middle-y bg-primary text-white rounded py-1 px-3 ms-4">$100
																			/ Night</small>
																	</div>
																	<div class="p-4 mt-2">
																		<div class="d-flex justify-content-between mb-3">
																			<h5 class="mb-0">` + hotels[i].hotelName + `</h5>
																			<div class="ps-2">
																			    ` + hotels[i].hotelScore + `
																			</div>
																		</div>
																		<p class="text-body mb-3" id="hotel-desc">` + hotels[i].hotelDesc + `</p>
																		<div class="d-flex justify-content-between">
																			<a class="btn style1 rounded py-2 px-4 xiangqing" id="` + hotels[i].id + `">查看详情</a>
																		</div>
																	</div>
																</div>
							</div>`

				$("#find-all").append(raw);
			}
		}
	});

	$.ajax({
		url: "http://localhost:8080/hotel/discountedhotel",
		async: false,
		method: "get",
		success: function(data) {
			var hotels = data.t;

			$("#discountedhotel").empty();

			for (let i = 0; i < hotels.length; i++) {

				var sr = hotels[i].hotelImg;
				var srs = sr.split(";")

				var raw = `<div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-duration="1200">
									<div class="room-item shadow rounded overflow-hidden">
										<div class="position-relative">
											<img style="width: 418px;height: 218px;" class="img-fluid" src="` + srs[0] + `" alt="">
											<small
												class="position-absolute start-0 top-100 translate-middle-y bg-primary text-white rounded py-1 px-3 ms-4">$100
												/ Night</small>
										</div>
										<div class="p-4 mt-2">
											<div class="d-flex justify-content-between mb-3">
												<h5 class="mb-0">` + hotels[i].hotelName + `</h5>
												<div class="ps-2">
												    ` + hotels[i].hotelScore + `
												</div>
											</div>
											<p class="text-body mb-3">` + hotels[i].hotelDesc + `</p>
											<div class="d-flex justify-content-between">
												<a class="btn style1 rounded py-2 px-4 xiangqing" id="` + hotels[i].id + `">查看详情</a>
											</div>
										</div>
									</div>
								</div>`

				$("#discountedhotel").append(raw);

			}


		}
	});


	$(".btn-primary").click(function() {
		var checkTime = $("#checkinDate").val();
		var leaveTime = $("#checkoutDate").val();
		var city = $(".city").val();
		var peopleNum = $(".peopleNum").val();

		window.location.href = 'list.html?check_time=' + checkTime +
			'&leave_time=' + leaveTime +
			'&city=' + city +
			'&peopleNum=' + peopleNum;
	});

	$(".xiangqing").click(function() {
		var id = $(this).attr("id");
		window.location.href = 'detail.html?hotelId=' + id;
	});



})